<script setup>
import {useRoute} from "vue-router";
import {reactive} from "vue";
import router from "@/router/index.js";

const myOrder = reactive({
    name: "我的订单",
    path: "/user/order"
})

const myMessage = reactive({
    name: "我的消息",
    path: "/user/message"
})

const route = useRoute()

const isActive = (menuPath) => {
    return route.path === menuPath
}
</script>

<template>
    <div class="right">
        <el-badge :value="12" class="item" :max="10">
                <button
                    class="menu-button"
                    @click="router.push(myMessage.path)"
                    :class="{ 'active-btn': isActive(myMessage.path) }">
                    <strong>{{myMessage.name}}</strong>
                </button>

        </el-badge>
        <el-badge :value="3" class="item" :max="10">
            <button
                class="menu-button"
                @click="router.push(myOrder.path)"
                :class="{ 'active-btn': isActive(myOrder.path)}">
                <strong>{{myOrder.name}}</strong>
            </button>

        </el-badge>
    </div>
</template>

<style scoped lang="scss">
.right {
  width: 220px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu-button {
    padding: 8px 16px;
    background: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: rgb(119, 115, 115);
    font-size: 1rem;
    transition: all 0.3s;
    &:hover {
    background: #f0f0f0;
}
}
.active-btn {
    background: #abcdff; /* 蓝色 */
    color: #000;
    &:hover {
        background: #abcdff;
    }
}


</style>